<template>
  <div class="my-orders">
    <van-nav-bar
      :title="$t('repair.myOrders.title')"
      left-arrow
      @click-left="router.back()"
    />
    
    <!-- Tab切换 -->
    <van-tabs v-model:active="activeTab" @change="onTabChange">
      <van-tab :title="$t('repair.myOrders.all')" name="all" />
      <van-tab :title="$t('repair.myOrders.processing')" name="processing" />
      <van-tab :title="$t('repair.myOrders.completed')" name="completed" />
      <van-tab :title="$t('repair.myOrders.cancelled')" name="cancelled" />
    </van-tabs>
    
    <!-- 搜索框 -->
    <div class="search-bar">
      <van-search
        v-model="searchKeyword"
        :placeholder="$t('repair.myOrders.searchPlaceholder')"
        @search="onSearch"
      />
    </div>
    
    <!-- 工单列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('repair.common.noData')"
        @load="onLoad"
      >
        <div class="order-list">
          <OrderCard
            v-for="order in orderList"
            :key="order.id"
            :order="order"
            :show-actions="true"
            @click="handleViewDetail(order)"
            @view-detail="handleViewDetail(order)"
            @submit-again="handleSubmitAgain(order)"
          />
        </div>
        
        <!-- 空状态 -->
        <van-empty
          v-if="!loading && orderList.length === 0"
          :description="$t('repair.myOrders.emptyDesc')"
        >
          <van-button type="primary" @click="goSubmit">
            {{ $t('repair.myOrders.goSubmit') }}
          </van-button>
        </van-empty>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showToast } from 'vant'
import { getMyRepairOrders } from '@/api/repair'
import { useRepairStore } from '@/stores/repair'
import OrderCard from './components/OrderCard.vue'

const router = useRouter()
const { t } = useI18n()
const repairStore = useRepairStore()

// Tab
const activeTab = ref('all')

// 搜索
const searchKeyword = ref('')

// 列表
const orderList = ref([])
const loading = ref(false)
const refreshing = ref(false)
const finished = ref(false)
const pageNum = ref(1)
const pageSize = 10

// 获取工单列表
const getOrderList = async (isRefresh = false) => {
  if (isRefresh) {
    pageNum.value = 1
    orderList.value = []
    finished.value = false
  }
  
  loading.value = true
  
  try {
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize
    }
    
    // 根据tab设置状态过滤
    if (activeTab.value === 'processing') {
      params.status = 'PROCESSING'
    } else if (activeTab.value === 'completed') {
      params.status = 'COMPLETED'
    } else if (activeTab.value === 'cancelled') {
      params.status = 'CANCELLED'
    }
    
    // 搜索关键词
    if (searchKeyword.value) {
      params.keyword = searchKeyword.value
    }
    
    const res = await getMyRepairOrders(params)
    
    if (isRefresh) {
      orderList.value = res.data.rows
    } else {
      orderList.value.push(...res.data.rows)
    }
    
    // 判断是否还有更多数据
    if (orderList.value.length >= res.data.total) {
      finished.value = true
    }
    
    pageNum.value++
  } catch (error) {
    showToast('获取工单列表失败')
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

// 下拉刷新
const onRefresh = () => {
  getOrderList(true)
}

// 上拉加载
const onLoad = () => {
  getOrderList()
}

// Tab切换
const onTabChange = () => {
  getOrderList(true)
}

// 搜索
const onSearch = () => {
  getOrderList(true)
}

// 查看详情
const handleViewDetail = (order) => {
  router.push(`/repair/track/${order.caseNo}`)
}

// 再次报修
const handleSubmitAgain = (order) => {
  // 复制工单信息到表单
  repairStore.updateFormData({
    deviceModel: order.deviceModel,
    deviceSn: order.deviceSn,
    faultDescription: order.faultDescription
  })
  router.push('/repair/submit')
}

// 去提交
const goSubmit = () => {
  router.push('/repair/submit')
}

onMounted(() => {
  getOrderList(true)
})
</script>

<style scoped lang="scss">
.my-orders {
  min-height: 100vh;
  background: linear-gradient(180deg, #f0f9ff 0%, #f7f8fa 100%);
  padding-bottom: 20px;
}

.search-bar {
  background: #fff;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  
  :deep(.van-search) {
    padding: 0;
    
    .van-search__content {
      border-radius: 20px;
      background: #f7f8fa;
    }
  }
}

.order-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

// 优化 Tabs 样式
:deep(.van-tabs) {
  .van-tabs__wrap {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  
  .van-tab {
    font-weight: 500;
    font-size: 15px;
  }
  
  .van-tab--active {
    font-weight: 600;
  }
  
  .van-tabs__line {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  }
}

// 优化空状态
:deep(.van-empty) {
  padding: 80px 0;
  
  .van-empty__description {
    font-size: 14px;
    color: #969799;
    margin-bottom: 20px;
  }
  
  .van-button {
    border-radius: 20px;
    padding: 0 32px;
    height: 40px;
  }
}
</style>

